<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五彩表</title>
    <style>
        #aa {
            width: 500px;
            height: 500px;
            table-layout: fixed;
            border-collapse: collapse;
            /*去边框,去空隙*/
        }

        #bb {
            background-color: red;
        }

        #cc {
            background-color: blue;
        }

        #dd {
            background-color: yellow;
        }

        #ee {
            background-color: black;
        }

        #ff {
            width: 90px;
            height: 50px;
        }

        #gg {
            background-color: green;
        }
    </style>
</head>
<body>
<table id="aa">
    <tr>
        <td id="bb" colspan="2"></td>
        <td id="cc" rowspan="2"></td>
    </tr>
    <tr>
        <td id="dd" rowspan="2"></td>
        <td id="ee" align="center"><img id="ff"
                                        src="http://articleimage.tooopen.com/image/20140717/20140717205515_7845.gif">
        </td>
    </tr>
    <tr>
        <td id="gg" colspan="2"></td>

    </tr>
</table>
</body>
</html>